
import React, { useState, useEffect, useRef } from 'react';
import './index.less';
import { getNewParams, DatePickerProps } from './interface';
import HourPage from './time/hour';
import MinutePage from './time/minute';
import SecondPage from './time/second';
import DayPage from './date/day';
import MonthPage from './date/month';
import YearPage from './date/year';
import { ListItem as TimeItemT } from './time/interface';
import { dayItem, monthItem } from './date/interface';

let initNewParam = getNewParams('');
const DatePicker = (props: DatePickerProps) => {
	const { value, onChange, defaultValue } = props;
	const limit = props.limit === undefined ? false : props.limit;
	const placeholder = props.placeholder || '请选择日期';
	const disabled = props.disabled === undefined ? false : props.disabled;
	// value
	const [year, setYear] = useState(initNewParam.year);
	const [month, setMonth] = useState(initNewParam.month);
	const [day, setDay] = useState(initNewParam.day);
	const [hour, setHour] = useState(initNewParam.hour);
	const [minute, setMinute] = useState(initNewParam.minute);
	const [second, setSecond] = useState(0);
	// 最终值
	const [inputValue, setInputValue] = useState(initNewParam.value);
	// label
	const [yearLabel, setYearLabel] = useState(initNewParam.yearLabel);
	const [monthLabel, setMonthLabel] = useState(initNewParam.monthLabel);
	const [dayLabel, setDayLabel] = useState(initNewParam.dayLabel);
	const [hourLabel, setHourLabel] = useState(initNewParam.hourLabel);
	const [minuteLabel, setMinuteLabel] = useState(initNewParam.minuteLabel);
	const [secondLabel, setSecondLabel] = useState('00');
	// visible
	const [plate, setPlate] = useState(3); // 板块状态 1:年，2：月，3：日
	const [visible, setVisible] = useState(false);
	// disbled
	const [monthLeft, setMonthLeft] = useState(false);
	const [monthRight, setMonthRight] = useState(false);
	const [yearLeft, setYearLeft] = useState(false);
	const [yearRight, setYearRight] = useState(false);
	// ref
	const monthRef = useRef();
	const yearRef = useRef();

	// change 板块变化
	function plateChange(value: number) {
		setPlate(value);
	}

	// change 年
	function yearChange(params: monthItem) {
		setYear(params.value);
		setYearLabel(params.label);
	}
	// change 月
	function monthChange(params: monthItem, type: number) {
		setMonth(params.value);
		setMonthLabel(params.label);

		let yearParam = {
			value: year,
			label: '',
			disabled: false,
		};
		switch (type) {
			case 1:
				yearParam.value = year + 1;
				yearParam.label = `${year + 1}`;
				yearChange(yearParam);
				break;
			case 2:
				yearParam.value = year - 1;
				yearParam.label = `${year - 1}`;
				yearChange(yearParam);
				break;
			default:
		}
	}
	// chnage 日
	function dayChange(params: dayItem) {
		setDay(params.value);
		setDayLabel(params.label);
	}
	// chnage 时
	function hourChange(params: TimeItemT) {
		setHour(params.value);
		setHourLabel(params.label);
	}
	// chnage 分
	function minuteChange(params: TimeItemT) {
		setMinute(params.value);
		setMinuteLabel(params.label);
	}
	// chnage 秒
	function secondChange(params: TimeItemT) {
		setSecond(params.value);
		setSecondLabel(params.label);
	}
	// fn 定位当前时间
	function setNewTime(time: string) {
		setYear(getNewParams(time).year);
		setMonth(getNewParams(time).month);
		setDay(getNewParams(time).day);
		setHour(getNewParams(time).hour);
		setMinute(getNewParams(time).minute);
		setYearLabel(getNewParams(time).yearLabel);
		setMonthLabel(getNewParams(time).monthLabel);
		setDayLabel(getNewParams(time).dayLabel);
		setHourLabel(getNewParams(time).hourLabel);
		setMinuteLabel(getNewParams(time).minuteLabel);
	}
	// fn 定位时间是否过期需要刷新
	function checkTimeOut() {
		if (!visible || value == '') return;
		let oldDate = new Date(value).getTime();
		let newDate = getNewParams('').timeStamp;
		if (oldDate < newDate) setNewTime('');
	}
	// change 时间拼接
	useEffect(() => {
		let newMonth = month < 10 ? '0' + month : month;
		let newDay = day < 10 ? `0${day}` : `${day}`;
		setInputValue(
			`${year}-${newMonth}-${newDay} ${hourLabel}:${minuteLabel}`
		);
		onChange(`${year}-${newMonth}-${newDay} ${hourLabel}:${minuteLabel}`);
	}, [year, month, day, hour, minute]);

	// 默认值设置
	useEffect(() => {
		setNewTime(defaultValue);
	}, [defaultValue]);
	// 每次打开恢复默认状态
	useEffect(() => {
		if (visible) {
			checkTimeOut();
			setPlate(3); // 恢复默认状态
		}
	}, [visible]);
	return (
		<div className="datepicker">
			<div
				onClick={() => {
					if (disabled) return;
					setVisible(true);
				}}
				className={`datepicker-input ${
					visible ? 'datepicker-input-focus' : ''
				}${disabled ? ' datepicker-disabled' : ''}`}
			>
				<input
					placeholder={placeholder}
					type="text"
					value={inputValue}
					readOnly
				/>
				<span className="iconfont iconcalendar"></span>
			</div>
			<div
				onClick={() => {
					setVisible(false);
				}}
				style={{ display: visible ? '' : 'none' }}
				className="datepicker-bg"
			></div>
			<div
				className="datepicker-plate"
				style={{ width: '394px', display: visible ? 'block' : '' }}
			>
				{/* 主板块 */}
				<div className="datepicker-session">
					{/* 日期板块 */}
					<div className="datepicker-date">
						{/* 年/月切换 */}
						<div className="datepicker-date-head">
							<div className="datepicker-date-head-item">
								<span
									onClick={() => {
										(yearRef as any).current.reduceFn();
									}}
									className={`iconfont icondoubleleft ${
										yearLeft
											? 'datepicker-date-head-disabled'
											: ''
									}`}
								></span>
								<span
									className={`iconfont icononeleft ${
										monthLeft
											? 'datepicker-date-head-disabled'
											: ''
									}`}
									onClick={() => {
										(monthRef as any).current.reduceFn();
									}}
								></span>
							</div>
							<div className="datepicker-date-head-title">
								<span
									onClick={() => {
										setPlate(1);
									}}
								>
									{yearLabel}年
								</span>
								<span
									onClick={() => {
										setPlate(2);
									}}
								>
									{month}月
								</span>
							</div>
							<div className="datepicker-date-head-item">
								<span
									onClick={() => {
										(monthRef as any).current.addFn();
									}}
									className={`iconfont icononeleft iconfontright ${
										monthRight
											? 'datepicker-date-head-disabled'
											: ''
									}`}
								></span>
								<span
									onClick={() => {
										(yearRef as any).current.addFn();
									}}
									className={`iconfont icondoubleleft icondoubleright " ${
										yearRight
											? 'datepicker-date-head-disabled'
											: ''
									}`}
								></span>
							</div>
						</div> 
						{/* 日期列表 */}
						<div className="datepicker-date-list">
							<YearPage
								ref={yearRef}
								change={yearChange.bind(this)}
								active={year}
								visible={plate === 1}
								plateChange={plateChange.bind(this)}
								limit={limit}
							/>
							<MonthPage
								ref={monthRef}
								change={monthChange.bind(this)}
								year={year}
								active={month}
								visible={plate === 2}
								plateChange={plateChange.bind(this)}
								limit={limit}
							/>
							<DayPage
								monthRef={monthRef}
								change={dayChange.bind(this)}
								year={year}
								month={month}
								active={day}
								visible={plate === 3}
								show={visible}
								limit={limit}
							/>
						</div>
					</div>
					{/* 时间板块 */}
					<div className="datepicker-time">
						<div className="datepicker-time-head">
							{hourLabel}:{minuteLabel}
							{/* :{secondLabel} */}
						</div>
						{/*  */}
						<div className="datepicker-time-session">
							<HourPage
								active={hour}
								year={year}
								month={month}
								day={day}
								change={hourChange.bind(this)}
								limit={limit}
							/>
							<MinutePage
								active={minute}
								year={year}
								month={month}
								day={day}
								hour={hour}
								change={minuteChange.bind(this)}
								limit={limit}
							/>
							{/* <SecondPage
							active={second}
							change={secondChange.bind(this)}
						/> */}
						</div>
					</div>
				</div>
				{/* 底部 */}
				<div className="datepicker-footer">
					<span
						onClick={() => {
							setNewTime('');
							setVisible(false);
						}}
						className="datepicker-footer-new"
					>
						此刻
					</span>
					<span
						onClick={() => {
							setVisible(false);
						}}
						className="datepicker-footer-submit"
					>
						确定
					</span>
				</div>
			</div>
		</div>
	);
};

export default DatePicker;
